<script setup>
import { ref, computed, watch, onMounted } from "vue";
import { useDataFormatter } from "@/stores";
import {
  getTopicsInfoService,
  getTopicsCategoryService,
  getTopicsByCategoryService,
} from "@/api/info";

const category = ref([]);
const search = ref("");
const categoryId = ref(0);

const {
  data: topicInfo,
  formattedData: formattedTopics,
  loadData: loadPosts,
} = useDataFormatter();

// 加载分类数据
const loadCategories = async () => {
  try {
    const response = await getTopicsCategoryService();
    category.value = [{ category_id: 0, name: "全部话题" }, ...response.data];
  } catch (err) {
    console.error("加载分类失败:", err);
  }
};

// 根据分类筛选文章
const handleCategoryChange = (event) => {
  categoryId.value = Number(event.target.value);

  try {
    // 按分类加载文章
    if (categoryId.value === 0) {
      // 加载全部文章
      loadPosts(() => getTopicsInfoService(5));
    } else {
      // 加载指定分类文章
      loadPosts(() => getTopicsByCategoryService(categoryId.value));
    }
  } catch (err) {
    console.error("加载文章失败:", err);
  }
};

onMounted(() => {
  loadPosts(() => getTopicsInfoService(5)); // 加载文章数据
  loadCategories(); // 加载分类数据
});
</script>

<template>
  <!-- 主要内容 -->
  <div class="container main-content">
    <div class="content-grid">
      <!-- 左侧主要内容 -->
      <div>
        <!-- 发帖按钮和筛选 -->
        <div class="post-filter-card">
          <div class="post-filter-row">
            <!-- 搜索框 -->
            <div class="search-box">
              <div class="relative">
                <input
                  type="text"
                  class="search-input"
                  placeholder="搜索攻略..."
                  v-model="search"
                  @keyup.enter="handleSearch"
                />
                <button class="search-button">
                  <img src="/public/搜索.svg" alt="搜索" class="search-icon" />
                </button>
              </div>
            </div>
            <!-- <router-link to="/community/post" class="post-btn">
              <svg
                fill="none"
                stroke="currentColor"
                viewBox="0 0 24 24"
                width="20"
                height="20"
              >
                <path
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  stroke-width="2"
                  d="M12 4v16m8-8H4"
                />
              </svg>
              发布新话题
            </router-link> -->
            <div class="filter-group">
              <select
                class="filter-select"
                v-model="categoryId"
                @change="handleCategoryChange"
              >
                <option
                  v-for="(item, index) in category"
                  :key="item.category_id"
                  :value="item.category_id"
                >
                  {{ item.name }}
                </option>
              </select>
              <select class="filter-select">
                <option>最新发布</option>
                <option>最多回复</option>
                <option>最多浏览</option>
                <option>最多点赞</option>
              </select>
            </div>
          </div>
        </div>
        <!-- 话题列表 -->
        <div class="topic-list">
          <!-- 话题卡片 1 -->
          <div class="topic-card" v-for="(item, index) in formattedTopics" :key="item.id">
            <div class="topic-content">
              <div class="topic-header">
                <div class="topic-user">
                  <img class="topic-avatar" :src="item.user.avatar_url" alt="用户头像" />
                  <div class="topic-user-info">
                    <p class="topic-user-name">{{ item.user.username }}</p>
                    <div class="topic-user-meta">
                      <time datetime="2024-03-20">{{ item.formattedDate }}</time>
                      <span>•</span>
                      <span v-if="item.category_id == 1">游戏讨论</span>
                      <span v-else-if="item.category_id == 2">求助问答</span>
                      <span v-else-if="item.category_id == 3">经验分享</span>
                      <span v-else-if="item.category_id == 4">创意工坊</span>
                    </div>
                  </div>
                </div>
                <div class="topic-stats">
                  <span class="topic-stat">{{ item.reply_count }} 回复</span>
                  <span class="topic-stat">{{ item.view_count }} 浏览</span>
                  <span class="topic-stat">{{ item.like_count }} 点赞</span>
                </div>
              </div>
              <a href="#" class="topic-link">
                <h3 class="topic-title">{{ item.title }}</h3>
                <p class="topic-desc">{{ item.content }}</p>
              </a>
              <div class="topic-footer">
                <div class="topic-actions">
                  <button class="topic-action-btn">
                    <svg
                      width="20"
                      height="20"
                      fill="none"
                      stroke="currentColor"
                      viewBox="0 0 24 24"
                    >
                      <path
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="2"
                        d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"
                      />
                    </svg>
                  </button>
                  <button class="topic-action-btn">
                    <svg
                      width="20"
                      height="20"
                      fill="none"
                      stroke="currentColor"
                      viewBox="0 0 24 24"
                    >
                      <path
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="2"
                        d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"
                      />
                    </svg>
                  </button>
                </div>
                <div class="topic-tags">
                  <span class="topic-tag">社交攻略</span>
                  <span class="topic-tag">求助</span>
                </div>
              </div>
            </div>
          </div>

          <!-- 话题卡片 2 -->
          <div class="topic-card">
            <div class="topic-content">
              <div class="topic-header">
                <div class="topic-user">
                  <img
                    class="topic-avatar"
                    src="https://images.unsplash.com/photo-1517841905240-472988babdf9?w=500&auto=format&fit=crop&q=60"
                    alt="用户头像"
                  />
                  <div class="topic-user-info">
                    <p class="topic-user-name">农场主小美</p>
                    <div class="topic-user-meta">
                      <time datetime="2024-03-19">2024-03-19</time>
                      <span>•</span>
                      <span>经验分享</span>
                    </div>
                  </div>
                </div>
                <div class="topic-stats">
                  <span class="topic-stat">25 回复</span>
                  <span class="topic-stat">356 浏览</span>
                  <span class="topic-stat">42 点赞</span>
                </div>
              </div>
              <a href="#" class="topic-link">
                <h3 class="topic-title">分享：我的自动化农场设计</h3>
                <p class="topic-desc">
                  经过三个月的努力，终于完成了全自动化农场的设计，分享给大家参考。包括自动浇水、自动收集、自动加工等系统的详细说明...
                </p>
              </a>
              <div class="topic-footer">
                <div class="topic-actions">
                  <button class="topic-action-btn">
                    <svg
                      width="20"
                      height="20"
                      fill="none"
                      stroke="currentColor"
                      viewBox="0 0 24 24"
                    >
                      <path
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="2"
                        d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"
                      />
                    </svg>
                  </button>
                  <button class="topic-action-btn">
                    <svg
                      width="20"
                      height="20"
                      fill="none"
                      stroke="currentColor"
                      viewBox="0 0 24 24"
                    >
                      <path
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="2"
                        d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"
                      />
                    </svg>
                  </button>
                </div>
                <div class="topic-tags">
                  <span class="topic-tag">农场设计</span>
                  <span class="topic-tag">自动化</span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- 分页 -->
        <div class="pagination">
          <a href="#" class="pagination-link">上一页</a>
          <a href="#" class="pagination-link">1</a>
          <a href="#" class="pagination-link active">2</a>
          <a href="#" class="pagination-link">3</a>
          <a href="#" class="pagination-link">下一页</a>
        </div>
      </div>
      <!-- 右侧边栏 -->
      <div class="sidebar">
        <!-- 热门话题 -->
        <div class="sidebar-card">
          <h3 class="sidebar-title">热门话题</h3>
          <div class="sidebar-list">
            <a href="#" class="sidebar-link">
              <span>春季作物种植指南</span>
              <span style="color: #6b7280; font-size: 0.9em">128 回复</span>
            </a>
            <a href="#" class="sidebar-link">
              <span>矿洞100层速通技巧</span>
              <span style="color: #6b7280; font-size: 0.9em">95 回复</span>
            </a>
            <a href="#" class="sidebar-link">
              <span>如何快速提升与村民好感度</span>
              <span style="color: #6b7280; font-size: 0.9em">86 回复</span>
            </a>
          </div>
        </div>
        <!-- 活跃用户 -->
        <div class="sidebar-card">
          <h3 class="sidebar-title">活跃用户</h3>
          <div class="sidebar-list">
            <div class="sidebar-user">
              <img
                class="sidebar-avatar"
                src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=500&auto=format&fit=crop&q=60"
                alt="用户头像"
              />
              <div class="sidebar-user-info">
                <p class="sidebar-user-name">农场主小明</p>
                <p class="sidebar-user-meta">发帖 128</p>
              </div>
            </div>
            <div class="sidebar-user">
              <img
                class="sidebar-avatar"
                src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=500&auto=format&fit=crop&q=60"
                alt="用户头像"
              />
              <div class="sidebar-user-info">
                <p class="sidebar-user-name">星露谷达人</p>
                <p class="sidebar-user-meta">发帖 95</p>
              </div>
            </div>
            <div class="sidebar-user">
              <img
                class="sidebar-avatar"
                src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=500&auto=format&fit=crop&q=60"
                alt="用户头像"
              />
              <div class="sidebar-user-info">
                <p class="sidebar-user-name">农场规划师</p>
                <p class="sidebar-user-meta">发帖 86</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
body {
  font-family: "Noto Sans SC", sans-serif;
  background-color: #f9fafb;
  margin: 0;
  padding: 0;
}
.container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 1rem;
}
/* 导航栏 */
.navbar {
  background-color: white;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.navbar-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 4rem;
  padding: 0 1rem;
}
.navbar-brand {
  display: flex;
  align-items: center;
}
.navbar-logo {
  height: 2rem;
  width: auto;
}
.navbar-title {
  margin-left: 0.5rem;
  font-size: 1.25rem;
  font-weight: bold;
  color: #059669;
}
.navbar-nav {
  display: none;
}
.nav-link {
  color: #6b7280;
  text-decoration: none;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  border-bottom: 2px solid transparent;
}
.nav-link.active,
.nav-link:focus {
  color: #111827;
  border-bottom-color: #059669;
}
.nav-link:hover {
  color: #374151;
  border-bottom-color: #d1d5db;
}
.login-btn {
  background-color: #059669;
  color: white;
  padding: 0.5rem 1rem;
  border-radius: 0.375rem;
  font-size: 0.875rem;
  font-weight: 500;
  border: none;
  cursor: pointer;
}
.login-btn:hover {
  background-color: #047857;
}
/* 主体布局 */
.main-content {
  padding: 2rem 0;
}
.content-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}
@media (min-width: 1024px) {
  .content-grid {
    grid-template-columns: 2fr 1fr;
  }
  .sidebar {
    margin-top: 0;
  }
}
/* 发帖与筛选 */
.post-filter-card {
  background-color: white;
  border-radius: 0.5rem;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  padding: 1.5rem;
  margin-bottom: 2rem;
}
.post-filter-row {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
@media (min-width: 768px) {
  .post-filter-row {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}
.post-btn {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 1rem;
  text-decoration: none;
  border: none;
  border-radius: 0.375rem;
  background-color: #059669;
  color: white;
  font-size: 0.875rem;
  font-weight: 500;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  cursor: pointer;
  transition: background 0.2s;
}
.post-btn:hover {
  background-color: #047857;
}
.post-btn svg {
  margin-right: 0.5rem;
}
.filter-select {
  border-radius: 0.375rem;
  border: 1px solid #d1d5db;
  padding: 0.5rem 1.5rem 0.5rem 0.5rem;
  font-size: 0.875rem;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}
.filter-select:focus {
  border-color: #059669;
  outline: none;
}
.filter-group {
  display: flex;
  gap: 1rem;
}
/* 话题卡片 */
.topic-list {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.topic-card {
  background-color: white;
  border-radius: 0.5rem;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  overflow: hidden;
}
.topic-content {
  padding: 1.5rem;
}
.topic-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.topic-user {
  display: flex;
  align-items: center;
}
.topic-avatar {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 9999px;
  object-fit: cover;
}
.topic-user-info {
  margin-left: 0.75rem;
}
.topic-user-name {
  font-size: 0.875rem;
  font-weight: 500;
  color: #111827;
  margin: 0;
}
.topic-user-meta {
  display: flex;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: #6b7280;
}
.topic-stats {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.topic-stat {
  font-size: 0.875rem;
  color: #6b7280;
}
.topic-title {
  font-size: 1.25rem;
  font-weight: bold;
  color: #111827;
  margin: 1rem 0 0.5rem 0;
}
.topic-desc {
  color: #6b7280;
  font-size: 0.95rem;
  margin-bottom: 0.5rem;
}
.topic-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 1rem;
}
.topic-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.topic-action-btn {
  background: none;
  border: none;
  color: #9ca3af;
  cursor: pointer;
  padding: 0.25rem;
  transition: color 0.2s;
}
.topic-action-btn:hover {
  color: #374151;
}
.topic-tags {
  display: flex;
  gap: 0.5rem;
}
.topic-tag {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.625rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 500;
  background-color: #dcfce7;
  color: #166534;
}
/* 分页 */
.pagination {
  display: flex;
  justify-content: center;
  margin-top: 2rem;
}
.pagination-list {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
}
.pagination-link {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 1rem;
  border: 1px solid #d1d5db;
  background-color: white;
  color: #6b7280;
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  margin: 0 2px;
  border-radius: 0.375rem;
}
.pagination-link.active {
  background-color: #ecfdf5;
  color: #059669;
}
.pagination-link:hover {
  background-color: #f9fafb;
}
/* 侧边栏 */
.sidebar {
  margin-top: 2rem;
}
.sidebar-card {
  background-color: white;
  border-radius: 0.5rem;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  padding: 1.5rem;
  margin-bottom: 2rem;
}
.sidebar-title {
  font-size: 1.125rem;
  font-weight: 500;
  color: #111827;
  margin-bottom: 1rem;
}
.sidebar-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.sidebar-link {
  color: #6b7280;
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 500;
}
.sidebar-link:hover {
  color: #111827;
}
.sidebar-user {
  display: flex;
  align-items: center;
}
.sidebar-avatar {
  width: 2rem;
  height: 2rem;
  border-radius: 9999px;
  object-fit: cover;
}
.sidebar-user-info {
  margin-left: 0.75rem;
}
.sidebar-user-name {
  font-size: 0.95rem;
  font-weight: 500;
  color: #111827;
  margin: 0;
}
.sidebar-user-meta {
  font-size: 0.8rem;
  color: #6b7280;
}

.search-box {
  flex: 1;
  max-width: 32rem;
}

.search-input {
  width: 100%;
  padding: 0.5rem;
  border: 1px solid #d1d5db;
  border-radius: 0.375rem;
  font-size: 0.875rem;
}

.search-input:focus {
  outline: none;
  border-color: #059669;
  box-shadow: 0 0 0 2px rgba(5, 150, 105, 0.1);
}

.relative {
  display: flex;
  align-items: center;
}

.search-button {
  display: flex;
  height: 100%;
  margin-left: 0.625rem;
  padding: 0.4rem;
  background-color: #059669;
  border: 0;
  border-radius: 0.3125rem;
  cursor: pointer;
}

.search-button:hover {
  background-color: #047857;
}

.search-icon {
  width: 1.25rem;
  height: 1.25rem;
  color: #9ca3af;
}

/* 页脚 */
.footer {
  background-color: white;
  margin-top: 3rem;
  padding: 3rem 0;
}
.footer-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: -0.5rem -1.25rem;
}
.footer-link {
  padding: 0.5rem 1.25rem;
  color: #6b7280;
  text-decoration: none;
  font-size: 1rem;
}
.footer-link:hover {
  color: #111827;
}
.footer-copyright {
  text-align: center;
  color: #9ca3af;
  font-size: 1rem;
  margin-top: 2rem;
}
@media (min-width: 640px) {
  .navbar-nav {
    display: flex;
    gap: 2rem;
  }
}
</style>
